// 应用壳
.app-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  > .ant-layout {
    height: 100%;
  }
}

// 应用头部
.app-header.ant-layout-header {
  .flex(row, space-between, center);
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  .app-header__left {
    .flex(row, flex-start, center);
    height: 100%;
    width: auto;
    padding-right: 20px;

    .app-header__left__logo {
      .flex(row, flex-start, center);
      width: 180px;
      height: 50px;

      .logo__menuicon {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
      }

      .app-icon {
        max-width: 20px;
      }

      > span {
        display: block;
        padding-left: 12px;
        text-align: left;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        .textellipsis;
      }
    }

    .anticon {
      font-size: 20px;
      padding: 4px;
      cursor: pointer;
    }
  }

  .app-header__center {
    .flex(row, flex-start, center);
    height: 100%;
    flex-grow: 1;
    &.app-header__center--center {
        justify-content: center;
    }
    &.app-header__center--right {
        justify-content: flex-end;
    }
  }
  .app-header__right {
    .flex(row, flex-end, center);
    height: 100%;
    flex-shrink: 0;
  }
}

// 应用正文
.app-content {
  display: flex;
  width: 100%;

  .app-content__left {
    max-height: 100%;
  }

  .app-content__right {
    height: 100%;
  }
}

.app-content {
  >.ant-layout {
    background-color: @container-background;
  }
  .ant-card {
    background-color: @layout-body-background;
  }
}

.app-header--dark.ant-layout-header.app-header {
    @bgColor: @config-header-bg-dark;
    background-color: @bgColor;
    color: contrast(@bgColor, darken(@bgColor, 80%), lighten(@bgColor, 80%));
}

.app-header--light.ant-layout-header.app-header {
    @bgColor: @config-header-bg-light;
    background-color: @bgColor;
    color: contrast(@bgColor, darken(@bgColor, 80%), lighten(@bgColor, 80%));
}
